<template>
  <div class="content">
    <header>商家信息</header>

    <!-- 商家信息 -->
    <div class="business-info">
      <img :src="business.businessImg" alt="" />
      <div class="business-text-info">
        <h3>{{ business.businessName }}</h3>
        <p>
          &#165;{{ business.starPrice }}起送 &#165;{{
            business.deliveryPrice
          }}配送
        </p>
        <p>{{ business.businessExplain }}</p>
      </div>
    </div>

    <!-- 商家食品信息 -->
    <ul class="business-food-list">
      <li v-for="(item, index) in foodlist" :key="index">
        <div class="business-food-info-left">
          <img :src="item.foodImg" alt="" />
          <div class="business-text-info">
            <h3>{{ item.foodName }}</h3>
            <p>{{ item.foodExplain }}</p>
            <p>&#165;{{ item.foodPrice }}</p>
          </div>
        </div>
        <div class="business-food-info-right">
          <div v-show="item.quantity > 0">
            <i class="fa fa-minus-circle" @click="toMinus(index)"></i>
          </div>
          <p>
            <span v-show="item.quantity > 0">{{ item.quantity }}</span>
          </p>
          <div>
            <i class="fa fa-plus-circle" @click="toAdd(index)"></i>
          </div>
        </div>
      </li>
    </ul>

    <!-- 支撑部分 -->
    <div class="footer-top"></div>
    <!-- 底部菜单 -->
    <div class="footer">
      <div class="footer-left">
        <div class="shopping-cart">
          <i class="fa fa-shopping-cart"></i>
          <div
            class="business-img-quantity"
            v-show="allquantity>0"
            id="food-quantity"
          >{{allquantity}}</div>
        </div>
        <div class="order-fee-info">
          <p id="food-all-fee">&#165;{{allprice}}</p>
          <p>另需配送费3元</p>
        </div>
      </div>
      <div class="footer-right">
        <!-- 可以支付 -->
        <div
          class="can-pay"
          v-show="allprice>=15"
          id="can-pay"
          @click="toOrders()"
        >
          去结算
        </div>
        <!-- 不可以支付 -->
        <div class="nocan-pay" id="nocan-pay" v-show="allprice<15">&#165;15元起送</div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "BusinessInfo",
  data() {
    return {
      businessId: this.$route.query.businessId,
      business: {},
      foodlist: [],
      user: ''
    };
  },
  computed:{
      allprice(){
          let allprice=0;
          for(let food of this.foodlist){
              if(food.quantity>0){
                  allprice+=food.quantity*food.foodPrice
              }
          }
          return allprice;
      },
      allquantity(){
          let  allquantity=0;
          for(let food of this.foodlist){
              if(food.quantity>0){
                  allquantity+=food.quantity;
              }
          }
          return allquantity;
      }
  },
  created() {
    this.user = this.$getSessionStorage("user");

    //获取商家信息
    this.$axios
      .get(
        "/BusinessController/getBusinessById/"+this.businessId
      )
      .then((response) => {
        console.log(response.data.data);
        this.business = response.data.data;
      })
      .catch((error) => {
        console.log(error);
      });

    //获取食品列表
    this.$axios
      .post(
        "/FoodController/listFoodByBusinessId/"+this.businessId
      )
      .then((response) => {
        console.log(response.data.data);
        this.foodlist = response.data.data;

        for (let i = 0; i < this.foodlist.length; i++) {
          this.foodlist[i].quantity = 0;
        }
        this.initCart();
      })
      .catch((error) => {
        console.log(error);
      });


  },
  methods: {
    toOrders(){
        this.$router.push({path:'/orders',query:{businessId:this.businessId}});
    },
    initCart(){
              //判断是否登录
      if(this.user !=null){
          //获取对应用户，对应商家的购物车信息
          this.$axios
        .get(
          "/CartController/listCart/"+this.user.userId+"/"+this.businessId
        )
        .then((response) => {
            let cartlist = response.data.data;
            for(let cart of cartlist){
                    for(let food of this.foodlist){
                        if(food.foodId == cart.foodId){
                                //证明食品有购物车记录
                                food.quantity = cart.quantity;
                        }
                    }
            }
            this.foodlist.sort();
        })
        .catch((error) => {
          console.log(error);
        });

      }
    },
    toAdd(index) {
      //做是否登录判断
      if (this.user == null) {
        this.$router.push("/login");
        return;
      }

      let count = this.foodlist[index].quantity;
      if (count == 0) {
        //做insert
        this.toInsert(index);
      } else {
        //做update
        this.toUpdate(index,1);
      }
    },
    toMinus(index) {
      let count = this.foodlist[index].quantity;
      if (count == 1) {
        //做delete
        this.toDelete(index);
      } else {
        //做update
        this.toUpdate(index,-1);
      }
    },
    toInsert(index) {
      let url=`/CartController/saveCart/${this.user.userId}/${this.business.businessId}/${this.foodlist[index].foodId}`;
      this.$axios
        .post(
          url
        )
        .then((response) => {
          let count = response.data.data;
          if (count == 0) {
            alert("添加失败！");
          } else {
            this.foodlist[index].quantity = count;
            //提示数据变化
            this.foodlist.sort();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    toUpdate(index,flag) {
        let qt = this.foodlist[index].quantity;
        if(flag>0){
            qt++;
        }else{
            qt--;
        }
        let url=`/CartController/updateCart/${this.user.userId}/${this.business.businessId}/${this.foodlist[index].foodId}/${qt}`;
        this.$axios
        .put(
          url
        )
        .then((response) => {
          let count = response.data.data;
          if (count == 0) {
            alert("修改失败！");
          } else {
            this.foodlist[index].quantity = qt;
            //提示数据变化
            this.foodlist.sort();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    toDelete(index) {
      let url=`/CartController/removeCart/${this.user.userId}/${this.business.businessId}/${this.foodlist[index].foodId}`;
        this.$axios
        .delete(
          url
        )
        .then((response) => {
          let count = response.data.data;
          if (count == 0) {
            alert("刪除失败！");
          } else {
            this.foodlist[index].quantity = 0;
            //提示数据变化
            this.foodlist.sort();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>


<style scoped>
/* 总容器 */
.content {
  width: 100%;
  height: 100%;
}
/* 头部 */
.content header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  font-size: 4.8vw;
  color: #fff;
  text-align: center;
  line-height: 12vw;
  position: fixed;
  top: 0vw;
  left: 0vw;
  z-index: 999;
}

.footer-top {
  width: 100%;
  height: 12vw;
}

/* 商家头部信息 */
.content .business-info {
  margin-top: 12vw;
  width: 100%;
  height: 55vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.content .business-info img {
  width: 40vw;
  height: 30vw;
  margin-top: 2.5vw;
}
.content .business-info .business-text-info {
  width: 100%;
  height: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.content .business-info .business-text-info h3 {
  font-size: 5vw;
}
.content .business-info .business-text-info p {
  font-size: 3vw;
  color: #666;
}
/* 商家食品信息 */
.content .business-food-list {
  width: 100%;
}
.content .business-food-list li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content .business-food-list li .business-food-info-left {
  display: flex;
}
.content .business-food-list li .business-food-info-left img {
  width: 20vw;
  height: 20vw;
}
.content .business-food-list li .business-food-info-left .business-text-info {
  margin-left: 3vw;
}
.content
  .business-food-list
  li
  .business-food-info-left
  .business-text-info
  h3 {
  font-size: 3.8vw;
  color: #555;
  margin-top: 2vw;
}
.content .business-food-list li .business-food-info-left .business-text-info p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}

.content .business-food-list li .business-food-info-right {
  display: flex;
  width: 16vw;
  justify-content: space-between;
  align-items: center;
}
.content .business-food-list li .business-food-info-right div:first-of-type {
  font-size: 5.5vw;
  color: #0097ef;
}
.content .business-food-list li .business-food-info-right p {
  font-size: 3.6vw;
  color: #333;
}
.content .business-food-list li .business-food-info-right div:last-of-type {
  font-size: 5.5vw;
  color: #0097ef;
}

/* 底部菜单 */
.content .footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 14vw;
  display: flex;
}
.content .footer .footer-left {
  flex: 2;
  display: flex;
  align-items: center;
  background-color: #505051;
}
.content .footer .footer-left .order-fee-info p:first-of-type {
  font-size: 4.5vw;
  color: #fff;
  margin-top: -2vw;
}
.content .footer .footer-left .order-fee-info p:last-of-type {
  font-size: 2.8vw;
  color: #aaa;
}
.content .footer .footer-left .shopping-cart {
  position: relative;
  margin-left: 3vw;
  margin-top: -6vw;
}
.content .footer .footer-left .shopping-cart i {
  width: 16vw;
  height: 16vw;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #3190e8;
  color: #fff;
  border: 1.6vw solid #444;
  font-size: 7vw;
  text-align: center;
  line-height: 13vw;
}
.content .footer .footer-left .shopping-cart .business-img-quantity {
  width: 5vw;
  height: 5vw;
  font-size: 3.6vw;
  background-color: red;
  color: #fff;
  border-radius: 2.5vw;
  text-align: center;
  line-height: 5vw;
  position: absolute;
  right: 0;
  top: 0;
}
.content .footer .footer-right {
  flex: 1;
  background-color: #38ca73;
}
.content .footer .footer-right .nocan-pay {
  background-color: #535356;
  font-size: 3.5vw;
  font-weight: 700;
  line-height: 14vw;
  text-align: center;
}
.content .footer .footer-right .can-pay {
  font-size: 4.5vw;
  font-weight: 700;
  line-height: 14vw;
  text-align: center;
  color: #fff;
}
</style>